---
const { file: designPath, filePath, search = true, title } = Astro.props;
import fs from 'fs';
import { getAbsoluteFilePathForAstroFile } from '@utils/files';
import Admonition from '@components/MDX/Admonition';
import NodeGraph from '../NodeGraph/NodeGraph';

import { isVisualiserEnabled } from '@utils/feature';

let design: any;
let id = 'design';
let maxHeight = 30;

try {
  const fileName = designPath.endsWith('.ecstudio') ? designPath : `${designPath}.ecstudio`;
  const pathToSpec = getAbsoluteFilePathForAstroFile(filePath, fileName);
  const designFile = fs.readFileSync(pathToSpec, 'utf8');
  design = JSON.parse(designFile);
} catch (error) {
  console.error(`Error reading design file: ${error}`);
}
---

{
  !design && (
    <Admonition type="warning">
      <div>
        <span class="block font-bold">{`<Design/>`} failed to load</span>
        <span class="block">
          Tried to load design file: {designPath}. Make sure you have this design file defined in your project.
        </span>
      </div>
    </Admonition>
  )
}

{
  design && (
    <div>
      <div
        class="h-[30em] my-6 mb-12 w-full relative border border-gray-200 rounded-md"
        id={`${id}-portal`}
        style={{
          maxHeight: maxHeight ? `${maxHeight}em` : `30em`,
        }}
      />

      <div>
        <NodeGraph
          id={id}
          title={title ?? design.name}
          nodes={design.nodes || []}
          edges={design.edges || []}
          hrefLabel={isVisualiserEnabled() ? 'View in visualizer' : undefined}
          href={isVisualiserEnabled() ? `/visualiser/designs/${design.id}` : undefined}
          linkTo={'visualiser'}
          designId={design.id || id}
          client:only="react"
          showSearch={search}
        />
      </div>
    </div>
  )
}

<style is:global>
  .react-flow__attribution {
    display: none;
  }
</style>
